JavaScript学习笔记

您所在的位置：网站首页 › vue :src能不能用加号 › JavaScript学习笔记

JavaScript学习笔记

2023-03-09 23:08| 来源: 网络整理| 查看: 265

JavaScript 1、什么是JavaScript

javascript是一门世界上流行的脚本语言，

1.2、历史

它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

2、快速入门 2.1、引入js

1、内部定义

alert("你好，啦啦啦");

2、外部引入

代码示例：

DOCTYPE html> Title alert("你好，啦啦啦"); 2.2、基本语法入门 DOCTYPE html> Title //基本变量 const num = 89; const name = "昭昭"; if (num>=60 && num alert("70~80") }else { alert("other") } /* 控制台输出 console.log() */ 2.3、基本数据类型 DOCTYPE html> Title //基本变量 var num = 89; var name = "昭昭"; if (num>=60 && num alert("70~80") }else { alert("other") } var aaa = ["aaaaaaa",1,2,3,4,null,false] /* 控制台输出 console.log() */

数值，文本，图形，音频，视频

变量

变量的定义都是用 var

var a = 1;

number

js不区分小数和整数，都用Number

123//整数123 123.1//浮点数123.1 1.123e3 //科学计数法 -99 //负数 NaN //not a number Infinity //表示无限大

字符串

‘abc’ “abc”

布尔值

true false

比较运算符

= == 等于（类型不一样，值一样，也会判断为true） === 绝对等于（类型一样，值一样，结果为true）

js缺陷不要使用 == 比较一般用===

须知：

NaN===NaN 这个与所有的数值都不相等，包括自己只能通过isNaN（NaN）来判断是否是NaN

浮点数问题：

console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算，存在精度问题

Math.abs(1/3-(1-2/3))name}`

5、字符串长度

str.length

6、字符串的可变性，不可变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKG4mMp2-1675761851891)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221017145919676.png)]

7、大小写转换

注意：是方法，不是属性

student.toUpperCase(); student.toLowerCase();

8、str.indexOf(‘s’); 找出下标

9、substring（）

str.substring(1)//从第一个字符串截取到最后一个字符串 str.substring(1,3) //截取[1,3)个字符串 3.2、数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,'zzz'] arr[0] arr[0] = 1;

1、长度

arr.length

注意：加入给arr.length赋值，数组大小会改变，如果赋值过小，则会导致元素丢失

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nxbV0M0o-1675761851892)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221017151704672.png)]

2、indexOf，通过元素下标索引

arr.indexOf(2) >1

字符串

3、slice() 截取Array的一部分，返回一个新数组，类似于substring

4、push() pop() 尾部

push:压入到尾部在尾部添加元素 pop：弹出尾部的一个元素删除尾部的一个元素

5、unshift() shift() 头部

unshift() 压入到头部 shift() 弹出头部的一个元素

6、排序 sort()

(3) ['B', 'A', 'C']0: "A"1: "B"2: "C"length: 3[[Prototype]]: Array(0) arr.sort() (3) ['A', 'B', 'C']

7、concat() 拼接字符串

3.3、对象

定义对象：

如干戈键值对

var person = { name: "zz", age: 18, email: "[email protected]", score: 28 }

js中第项，{…}表示一个对象，键值描述对象属性，用逗号隔开，最后一个不用加逗号

JS中的所有键都是字符串，值是任意对象

1、对象赋值

person.name = "zz1" 'zz1' person.name 'zz1'

2、使用一个不存在的对象属性值，不会报错只会undefined

3、动态的删减属性

delete person.name true person {age: 18, email: '[email protected]', score: 28}

4/、添加属性直接赋值就可

person.haha = "hah" 'hah' person {age: 18, email: '[email protected]', score: 28, haha: 'hah'}

5、判断属性值是否在这个对象中

xxx in xxxx

'age' in person true //继承 'toString' in person true

6、判断一个属性是否是这个对象自身拥有的（继承的不算）hasOwnProperty()

person.hasOwnProperty('toString') false person.hasOwnProperty('age') true 3.4、流程控制

if else语句

var num = 3; if (numnum+=2}

while循环

while(num>100){ num++; }

for循环

for (let i = 0;i console.log(value) })

for…in

for(var num in age){ console.log(age[num]) } //参数：num是数组的下标索引需要数组[下标] 形式 3.5、Map和Set

ES6的新特性

Map：

var map = new Map([['name',"昭昭"],['age',13],['score',19]]); var name1 = map.get('name'); console.log(name1);//通过key获得value map.set('zz',"123")//新增或修改 map.delete('name');//删除

Set:无序不重复的集合

var set = new Set([1,2,3,4,5,1,1,1,1]); set.add(9);//添加 set.delete(2);//删除 console.log(set.has(4));//是否包含某个元素 3.6 iterator

通过for of 遍历

遍历数组

var arr = [1,2,3,4,5,1,1,1,1]; for (const auto of arr) { console.log(auto) }

遍历map

var map1 = new Map([["jack",100],["zhaozhao",90],["rose",88]]); for (var a of map1){ console.log(a); }

遍历set

var set = new Set([1,2,3,4,5,1,1,1,1]); for (const auto of set) { console.log(auto) } 4、函数 4.1、定义函数

定义方式一

绝对值函数

function abs(x){ if(x>=0){ return x; }else{ return -x; } }

一旦执行到return 代表函数结束，返回结果。

如果没有执行return，函数执行完也会返回结果。

定义方式二

var abs = function(x) { if(x>=0){ return x; }else{ return -x; } }

function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs也可以调用函数。

两种方式等价

调用函数

abs(10) //10 abs(-10) //10

参数问题：javaScript可以传任意个参数，也可以不传参数，这样容易发生各种歧义，导致代码有问题，所以我们可以自己定义异常

function abs(x){ if (typeof x != "number"){ throw 'Not A Number'; } if(x>=0){ return x; }else{ return -x; } }

如果参数不是一个数字的话，就会报’Not A Number’错误

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zVXyW60M-1675761851892)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221017225742940.png)]

arguments

arguments是JS免费送的一个关键字（关于函数参数的数组）

代表，传递进来的所有的参数所组成的一个数组，我们可以通过遍历这个数组，来发现这些参数，因为JS的不严谨性，我们虽然定义上只有一个参数，但是调用函数的时候可以传多个参数，这就导致有时候会出现问题，所以我们需要arguments 我们可以通过arguments 来判断那些隐藏的参数。

function abs(x){ console.log("x-->"+x); for (let i = 0;i // throw 'Not A Number'; // } if(x>=0){ return x; }else{ return -x; } }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ApcX1mx-1675761851893)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221017231159344.png)]

问题：arguments 包括所有的参数，我们有时候只需要一些特定的参数，排除那些我们不需要的参数。

rest

ES6引入的新特性，在获取除了一经定义的参数外的所有参数。

function f(a,b,...rest) { console.log("a-->"+a); console.log("b-->"+b); console.log(rest); }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M8Pvfcbr-1675761851893)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221017232943891.png)]

rest参数必须写在参数最后面，必须使用…标识。

4.2、变量的作用域

在JS张，var定义变量实际是有作用域的，假设在函数体中有声明，则在函数体外不可使用（闭包）

function zz() { var x = 1; x = x + 1; } x = x + 2;//Uncaught ReferenceError: x is not defined

如果两个函数内部都使用了相同的变量名，不会相互冲突，只要这个变量在函数的函数体中，都是局部变量，只在函数体内生效,所以不会冲突。

function zz() { var x = 1; x = x + 1; } function zz2() { var x = 'A'; x = x + 1; }

函数的嵌套：

function zz() { var x = 1; x = x + 1; function zz3() { var y = x + 1; } //会报错，因为内部函数可以访问外部函数的变量，但是外部函数不能访问内部函数的变量 var z = x + y; }

如果内部函数和外部函数的变量相同，则互不影响

function f() { var x =1; function f1() { var x = 'A'; console.log("内部-->"+x); } console.log("外部-->"+x); f1(); } f();

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CVrNnlMH-1675761851893)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221018082634126.png)]

内部原理：在JS中，函数查找变量是从自身开始的，会由内到外查找，如果是内部函数，会先查找自身的变量，如果外部函数的变量与其内部的变量有重名的情况，则内部函数会自动屏蔽外部函数的变量。

function f2() { var x = 'x' + y; console.log(x);//x undefined var y = 'y'; }

如果函数的变量没有定义，但在后面定义了，JS的引擎会自动将函数的定义提前。

function f3() { var x = 1, y = 'a' y=x+y; //在前面先定义所有的变量，之后就可以随便使用 }

全局变量

var s = 1; function f4() { console.log(s); } f4(); console.log(s);

全局对象 window

var h = 'xxx'; alert(h); alert(window.h);

alert

var z = 'xxx'; window.alert(z); var Old_alert = window.alert; window.alert = function () { }; //发现alert失效了 window.alert(123); //恢复 window.alert = Old_alert; window.alert(456);

JavaScript时加上只有一个全局作用域，任何变量（函数也可以是变量），假设没有在函数作用范围内找到，就会向外查找，如果还没有找到，那就会报错（RefrenceError）

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的JS文件，使用了相同的全局变量会发生冲突，如何减少这些冲突？、

//定义一个唯一全局变量 var ZhaozhaoApp = {}; //定义全局变量 ZhaozhaoApp.name = 'zz'; ZhaozhaoApp.add = function (a,b) { return a+b; }

我们可以把自己的全局变量都放在自己创建的一个唯一空间名字中，减少全局命名冲突的问题。

jQuery就是这样做的

局部作用域 let

function aaa() { for (var i = 0; i for (let i = 0; i birth:2000, name:'昭昭', //方法 age:function () { //年龄 = 今年 - 出生的年 var now = new Date().getFullYear(); return now - this.birth; } } //属性 zz.name //方法 zz.age()

this.代表将上方代码拆开看看

function getAge() { //年龄 = 今年 - 出生的年 var now = new Date().getFullYear(); return now - this.birth; } var zz = { birth:2000, name:'昭昭', //方法 age:getAge } //zz.age() ok //getAge NaA 调用的是this是window 但window没有birth属性

this是无法指向的，是默认指向调用它的哪个对象

apply

在JS中可以控制this的指向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dVtey5n2-1675761851894)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221018145009372.png)]

5、内部对象

标准对象

typeof 123 'number' typeof '123' 'string' typeof true 'boolean' typeof NaN 'number' typeof [] //数组 'object' typeof {} //对象 'object' typeof Math.abs //函数 'function' typeof undefined //未定义的 'undefined' 5.1、Data

基本使用

var now = new Date(); now.getFullYear(); //年 now.getMonth(); //月 now.getDay(); //获取星期几 now.getDate(); //日 now.getHours();//时 now.getMinutes(); //分 now.getSeconds();//秒 now.getTime();//时间戳以1970年1月1日0点00分到现在的毫秒数全球统一

转换

now = new Date(1666077712229) Tue Oct 18 2022 15:21:52 GMT+0800 (GMT+08:00) now.toLocaleDateString() '2022/10/18' now.toGMTString() 'Tue, 18 Oct 2022 07:21:52 GMT' 5.2、JSON

json是什么

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

对象：对象在 JS 中是使用花括号包裹 {} 起来的内容，数据结构为 {key1：value1, key2：value2, …} 的键值对结构。在面向对象的语言中，key 为对象的属性，value 为对应的值。键名可以使用整数和字符串来表示。值的类型可以是任意类型。

数组：数组在 JS 中是方括号 [] 包裹起来的内容，数据结构为 [“java”, “javascript”, “vb”, …] 的索引结构。在 JS 中，数组是一种比较特殊的数据类型，它也可以像对象那样使用键值对，但还是索引使用得多。同样，值的类型可以是任意类型。

在JavaScript一切皆为对下颌骨，任何支持JS的类型都可以用JSON来表示：string，number…

格式：

对象都用{}数组都用[]所有的键值对都是用 key：value

json和js对象的转换

JSON和js对象的区别：

var obj = {a:'hello',b:'hellob'} var json = '{"a":"hello","b":"hellob"}'

5.3、Ajax

原生的js写法，xhr异步请求jQuey封装好的方法 $(“#name”).ajax(“”)axios 请求 6、面向对象编程 6.1、神么是面向对象

JS 。java，c#…面向对象，JS有些区别

类：模板对象：具体的实例

原型：

class 继承

class关键字是在ES6引入的

//定义一个学生类 class student{ //构造器 constructor(name) { this.name = name; } //新增方法直接在下面写就好 hello(){ alert('hello'); } }

继承

//定义一个学生类 class student{ //构造器 constructor(name) { this.name = name; } //新增方法直接在下面写就好 hello(){ alert('hello'); } } //继承 class xiaoStudent extends student{ constructor(name,grade) { super(name); this.grade = grade; } myGrade(){ alert('我是一名小学生') } }; var xiaoming = new student('xiaoming'); var xiaohong = new student('xiaohong'); var xiaohua = new xiaoStudent('xiaohua',2);

继承本质上还是将student作为xiaoStudent的原型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ui8Lf8Q7-1675761851894)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221018201004459.png)]

原型链

每一个对象最终的原型都会指向object object 是老祖宗总之是一个环形；

__ proto __ (原型)

7、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器的关系？

JavaScript的诞生就是为了能在浏览器上运行！

BOM：浏览器对象模型

浏览器分类：（内核）

IE 6~11ChromeSafariFileFoxOpera

三方浏览器

QQ浏览器360浏览器

window

window.alert(111) undefined window.innerHeight 2022 window.innerWidth 458 window.outerHeight 505 window.outerWidth 114

Navigator

Navigator封装了浏览器的信息

navigator.appName 'Netscape' navigator.appVersion '5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36' navigator.userAgent 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36' navigator.platform 'Win32'

大多是时候，我们不会使用navigator对象，欣慰会被人为修改

不建议使用这些属性来判断和编写代码

screen

screen.width 1245 px screen.height 635 px

代表屏幕尺寸

location（重要）

location代表挡墙页面的URL信息

host: "www.baidu.com" href: "https://www.baidu.com/" protocol: "https:" reload: ƒ reload() //刷新页面 //设置新的地址 location.assign()

document

document代表当前的页面 HTML DOM文档树

document.title '百度一下，你就知道' document.title='昭昭' '昭昭'

获取具体的文档树结点

java javaSE javaEE var dl = document.getElementById('app');

获取cookie值

document.cookie 'BIDUPSID=98C7D91FC38427B9FAE78C8C872EA876; PSTM=1651710111; BAIDUID=98C7D91FC38427B95A966D75C60B30F9:FG=1; BD_UPN=12314753; BAIDUID_BFESS=98C7D91FC38427B95A966D75C60B30F9:FG=1; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; MSA_WH=855_634; COOKIE_SESSION=61888_4_9_8_9_49_1_3_8_9_10_13_364728_320_0_0_1666016736_1665561625_1666078621%7C9%23422_19_1665561599%7C7; Hm_lvt_aec699bb6442ba076c8981c6dc490771=1665386777,1665561180,1666078636; Hm_lpvt_aec699bb6442ba076c8981c6dc490771=1666078636; RT="z=1&dm=baidu.com&si=5y5bu2q2qxm&ss=l9dw77tf&sl=4&tt=4zg&bcn=https%3A%2F%2Ffclog.baidu.com%2Flog%2Fweirwood%3Ftype%3Dperf&ld=2jag&ul=3kni&hd=3koi"; BD_HOME=1; H_PS_PSSID=37542_36548_37353_37584_37300_36885_36789_37532_37500_26350_37370; delPer=0; BD_CK_SAM=1; PSINO=6; BA_HECTOR=0ka4052g040g8g8080204hhi1hkt8hb1b; channel=baidusearch; baikeVisitId=c119f055-49a0-4ee7-848e-1f3c58fd0a3a; ZFY=HZmwY58wyxXM1UeLUEhYnnIeSMq8glRQeXKLtmebq08:C; B64_BOT=1; H_WISE_SIDS=110085_180636_188746_194530_204906_205168_209568_210321_211986_212295_212868_213031_213352_214793_215730_216850_216941_219412_219943_219946_220017_220663_221873_221967_222299_222397_222522_222605_222625_223063_223209_224080_224086_224268_224457_224572_225639_225846_225860_226547_226627_226815_226956_226964_227147_227152_227515_227528_227577_227743_227864_227934_227963_227969_228535_228604_228617_228872_229028_229061_229154_229166_229365_229526_229685_229913_229938_229968_229975_230084_230184_230232_230241_230248_230267_230543_230622_230625_230664_230686_230862_230923_230930_230969_231091_231117_231175_231208_231463_231919_232242_232246_232255_232357; H_WISE_SIDS_BFESS=110085_180636_188746_194530_204906_205168_209568_210321_211986_212295_212868_213031_213352_214793_215730_216850_216941_219412_219943_219946_220017_220663_221873_221967_222299_222397_222522_222605_222625_223063_223209_224080_224086_224268_224457_224572_225639_225846_225860_226547_226627_226815_226956_226964_227147_227152_227515_227528_227577_227743_227864_227934_227963_227969_228535_228604_228617_228872_229028_229061_229154_229166_229365_229526_229685_229913_229938_229968_229975_230084_230184_230232_230241_230248_230267_230543_230622_230625_230664_230686_230862_230923_230930_230969_231091_231117_231175_231208_231463_231919_232242_232246_232255_232357; plus_lsv=e9e1d7eaf5c62da9; plus_cv=1::m:f3ed604d; Hm_lvt_12423ecbc0e2ca965d84259063d35238=1666097813; SE_LAUNCH=5%3A27768296_0%3A27768296; rsv_i=f4f1urzIkV0cmI%2FNBQ7eFUlRZXQ254lps7dMDTY6kBiVmxXlRIuWlKHzKjOGCi2bO72hsWa9ZhDVH80BQ3CunE97SqmTrI4; Hm_lpvt_12423ecbc0e2ca965d84259063d35238=1666097830' 8、操作DOM对象（重点）

核心

浏览器网页就是一个DOM树形结构

更新：更新Dom节点遍历Dom节点，得到Dom节点删除:删除一个Dom节点添加：添加一个Dom节点

要操作一个Dom节点，就必须要先获得一个Dom节点

DOCTYPE html> Title 标题1 p1 p2 //对应css的选择器 var h1 = document.getElementsByTagName('h1'); //通过标签名获取结点 var p1 = document.getElementById('p1'); //通过id获得结点 var p2 = document.getElementsByClassName('p2'); //通过class获得结点 var father = document.getElementById('father'); var childrens = father.children; //获取父节点下的所有子节点 // father.firstChild; // father.lastChild;

更新节点

DOCTYPE html> Title var zz = document.getElementById('zz'); zz.innerText = 'zz';

操纵文本

zz.innerText = 'zz'; zz.innerHTML = 'zz' //可以解析html文本标签

操作css

//通过.style定位到css，再调用css的属性后面的属性需要用字符串包裹 zz.style.color = 'red'; zz.style.padding = '20px'; zz.style.fontSize = '100px'; //需要注意的是原来css的font-size 改为驼峰命名法

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jx6Wf7A3-1675761851895)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221018235742472.png)]

删除结点

删除结点的步骤：

先获取父节点，再通过父结点删除。

DOCTYPE html> Title 标题1 p1 p2 //先获得自己的结点 var self = document.getElementById('p1'); //在获得此节点的父节点使用.parentElement var father = self.parentElement; //在调用父结点的删除方法 father.removeChild(p1); //注意：删除是一个动态的过程 father.removeChild(father.children[0]) father.removeChild(father.children[1]) father.removeChild(father.children[2])

注意：删除的时候是一个动态的的过程，所以删除的时候子节点是在不断变化的，如果找不到结点该节点就会报错。

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过使用innerHTML就可以增加一个元素，但是如果这个Dom节点如果存在元素了，使用上述方法的话就会覆盖原来的Dmo节点。

DOCTYPE html> Title JavaScript JavaSE JavaEE JavaME var js = document.getElementById('js'); var list = document.getElementById('list'); //插入节点： list.appendChild(js);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Aj63sihZ-1675761851895)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221019144534661.png)]

通过新建一个标签，实现插入

//已经存在的节点 var js = document.getElementById('js'); var list = document.getElementById('list'); //插入节点： list.appendChild(js); //通过JS 创建一个新节点 var NewP = document.createElement('p');//创建一个p标签 NewP.id = 'zz';//给新创建的p标签赋id值 NewP.innerText = '你好啊，';//设置文本 //插入list list.appendChild(NewP);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VcRANsaO-1675761851895)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221019145558992.png)]

插入方法二：

//创建一个标签节点 var myScript = document.createElement('script'); myScript.setAttribute('type','text/javascript');//设置属性 //设置css //首先创建一个style标签 var myStyle = document.createElement('style'); //在给style标签写上默认值 myStyle.setAttribute('type','text/css'); //在写入css代码 myStyle.innerText = 'body{background-color: blue;}'; //再将写好的style标签放在head里面很重要！！如果少这一步不会显示 document.getElementsByTagName('head')[0].appendChild(myStyle); 9、操作表单（验证） 9.1、表单是什么

form DOM树

文本框 text下拉框 < select >单选框 radio多选框 chekbox隐藏域 hidden密码框 password…

表单的目的：提交信息

9.2、获得提交的信息 DOCTYPE html> Title 账号：性别：男女 var userName = document.getElementById('username'); // 获取输入的值还可以赋值修改 userName.value var nan = document.getElementById('nan'); var nv = document.getElementById('nv'); //对于单选框、多选框使用.value只能取到当前的值并不能动态的获取在浏览器上到底选择了哪个 //使用.checked赋值如果被选中的话 checked的值为true 反之为false //查看返回结果 nan.checked nv.checked 可以通过给此属性赋值来改变选项 9.3、提交表单

按钮提交事件

DOCTYPE html> Title 账号：密码：提交 function aa() { var userName= document.getElementById('username'); var pwd = document.getElementById('pwd'); console.log(userName.value); //MD5算法加密 pwd.value = md5(pwd.value); console.log(pwd.value); return true; }

通过md5加密完成对密码的保护

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-syWmWcS6-1675761851895)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221019164647053.png)]

表单提交事件

可以校验和判断表单的内容是否进行跳转原理是执行的js函数的最终返回值是什么 true则可以 false则不能将这个boolean值传给表单的一个onsubmit属性在通过return关键字来决定是否进行跳转。

涉及知识：

md5加密隐藏表单的使用（如果不使用加密的密码将会改变场长度，容易看破）

主要是因为name属性浏览器返回的值是name属性我们可以不给我们输入的密码设置name属性给一个隐藏域设置名为pwd的name 然后将真实输入的密码传给这个隐藏域，最后将这个隐藏域加密并显示出来这样密码框的密码就并不会被操作了

DOCTYPE html> Title 账号：密码：提交 function aa() { var userName= document.getElementById('username'); var pwd = document.getElementById('input-pwd'); console.log(userName.value); var md5pwd = document.getElementById('md5_pwd'); md5pwd.value = md5(pwd.value) //可以校验判断表单内容，true是通过提交 false是阻止提交 return true; }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EttBo1ee-1675761851896)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221019170501012.png)]

10、jQuery DOCTYPE html> Title 点我 // 选择器就是css选择器 $('#test-jQuery').click(function () { alert('hello,jQuery!!!'); })

事件：

DOCTYPE html> Title #divMove{ width: 700px; height: 700px; border: 1px solid red; } mouse: 在这里移动鼠标试试 //当网页元素加载完成之后，响应事件可简写 $(function () { $('#divMove').mousemove(function (e) { $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY); }) })

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rpomy9Fa-1675761851896)(C:\Users\昭昭\AppData\Roaming\Typora\typora-user-images\image-20221019222326789.png)]

操作Dom

节点文本操作

$('#test-ul li[name=py]').text();//获得值 $('#test-ul li[name=py]').text('');//设置值 $('#test-ul').html();//获得值 $('#test-ul').html('123');//设置值 DOCTYPE html> Title $('#test-ul li[name=py]').text(); $('#test-ul').html(''); javascript python

css操作：

$('#test-ul li[name=py]').css("color","red");//键值对

元素的显示和隐藏：本质上还是设置了display:none;

$('#test-ul li[name=py]').show()//显示 $('#test-ul li[name=py]').hide()//隐藏 Title 点我 ```

事件：

[外链图片转存中…(img-rpomy9Fa-1675761851896)]

操作Dom

节点文本操作

css操作：

$('#test-ul li[name=py]').css("color","red");//键值对

元素的显示和隐藏：本质上还是设置了display:none;

$('#test-ul li[name=py]').show()//显示 $('#test-ul li[name=py]').hide()//隐藏

【本文地址】

公司简介

联系我们